import { Column } from '@/components/pro-panel/index.typing';
import { LayerTypeEnum } from './index';

export function usePolymerizationColumns(changeLayerType: Function) {
  const polymerizationColumns = computed<Column[]>(() => {
    /** 基础设置 */
    const basicColumns: Column[] = [
      {
        type: 'select',
        prop: 'layerType',
        label: '图层类型',
        group: 'basic',
        options: LayerTypeEnum,
        formProps: {
          onChange: changeLayerType,
        },
      },
      {
        type: 'select',
        prop: 'heightKey',
        label: '离地高度',
        group: 'basic',
        options: [],
        span: 11,
        formProps: {
          placeholder: '无/按字段',
        },
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'basic',
        span: 2,
        formProps: {
          placeholder: '按字段值拔高',
        },
      },
      {
        type: 'input-number',
        prop: 'heightValue',
        label: ' ',
        group: 'basic',
        span: 11,
        formProps: {
          controls: false,
        },
      },
    ];

    /** 效果设置 */
    const effectColumns: Column[] = [
      {
        type: 'select',
        prop: 'fillStyle333',
        label: '样式',
        group: 'effect',
        options: [],
      },
      {
        type: 'select',
        prop: 'heightKey333',
        label: '尺寸',
        group: 'effect',
        options: [],
        span: 11,
      },
      {
        type: 'slot',
        prop: 'addIconSlot',
        label: ' ',
        group: 'effect',
        span: 2,
      },
      {
        type: 'input-number',
        prop: 'size333',
        label: ' ',
        group: 'effect',
        span: 11,
        formProps: {
          controls: false,
        },
      },
      {
        type: 'progress-input',
        prop: 'alpha333',
        label: '透明度',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'checkbox',
        prop: '颜色叠加333',
        label: '',
        group: 'effect',
        options: [{ label: '颜色叠加', value: 1 }],
        span: 10,
      },
      {
        type: 'color-picker',
        prop: 'baseWaterColor333',
        label: '',
        group: 'effect',
        span: 14,
      },
      {
        type: 'select',
        prop: 'fontShow333',
        label: '文字显示',
        group: 'effect',
        options: [],
      },
      {
        type: 'progress-input',
        prop: 'fontSize333',
        label: '文字大小',
        group: 'effect',
        formProps: {
          min: 0,
          max: 1,
          step: 0.01,
        },
      },
      {
        type: 'color-picker',
        prop: 'fontColor333',
        label: '文字颜色',
        group: 'effect',
      },
    ];

    return [
      {
        type: 'input',
        prop: 'name',
        label: '名称',
        required: true,
        rules: [{ required: true, message: '名称不能为空' }],
      },
      ...basicColumns,
      ...effectColumns,
    ];
  });

  return {
    polymerizationColumns,
  };
}
